<template>
  <div class="table-main">
    <div class="breadcrumb-main">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item><i class="icon iconfont icon-icon_folder"></i><router-link to="/">根目录</router-link></el-breadcrumb-item>
          <el-breadcrumb-item v-for="(item, index) in breadcrumbIndex()" :key="index">
            <router-link :to="{ name: 'files', params: { id: item.id } }">{{ item.name }}</router-link>
          </el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <el-table :data="$store.state.files.files.slice((currentPage-1)*pagesize,currentPage*pagesize)" style="width: 100%" stripe border>
      <el-table-column prop="file_name" label="文件名">
        <template slot-scope="scope">
          <router-link v-if="scope.row.is_dir" :to="{ name: 'files', params: { id: scope.row.id } }">
            <i class="icon iconfont icon-wenjianjia"></i>
            <span style="margin-left: 6px">{{ scope.row.file_name }}</span>
          </router-link>
          <a v-else href="javascript:;" v-on:click="openFiles(scope.row)">
            <i class="icon iconfont icon-wenjian4"></i>
            <span style="margin-left: 6px">{{ scope.row.file_name }}</span>
          </a>
        </template>
      </el-table-column>
      <el-table-column prop="parent_index" label="属于文件夹">
        <template slot-scope="scope">
          <div class="parent_main" style="display:inline-block;">
            <a v-if="!scope.row.parent_index" href="javascript:;">根目录</a>
            <router-link v-else v-for="(items,index) in scope.row.parent_index" :key="index" :to="{ name: 'files', params: { id: items.id } }">
              <span v-if="items.name == '/'">根目录/</span>
              <span v-else>{{ items.name }}/</span>
            </router-link>
          </div> 
        </template>
      </el-table-column>
      <el-table-column prop="created_at" label="时间" width="200" :formatter="formatDate"></el-table-column>
      <el-table-column prop="is_dir" label="操作" width="150" v-if="$store.state.auth.isLogined">
      <!-- <el-table-column prop="is_dir" label="操作" width="150"> -->
        <template slot-scope="scope">
          <div>
            <a class="btn btn-default btn-xs" v-bind:href="['/api/Downloads/' + scope.row.id]" v-if="!scope.row.is_dir" v-bind:download="scope.row.file_name" >
              <span>下载</span>
            </a>
            <a class="btn btn-default btn-xs" href="javascript:;" v-on:click="onDelete(scope.row)">
              <span>删除</span>
            </a>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination style="margin-top:15px; text-align:center;"
      layout="sizes, prev, pager, next, total"
      :page-sizes="pageSizesList"
      :total="this.$store.state.files.files.length"
      @current-change="current_change">
    </el-pagination>
    <el-dialog :visible.sync="dialogVisible" width="60%">
      <img v-bind:src="dialogImage" width="100%"/>
    </el-dialog>
    <div class="loading"><i class="el-icon-loading"></i></div>
  </div>
</template>


<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";
import { Route } from "vue-router";

@Component
export default class Files extends Vue {
  
  item='';

  mounted() {
    this.$store.dispatch("getCurDirAsync", { id: this.$route.params.id });
    this.$store.dispatch("getFilesAsync", { parentId: this.$route.params.id });
  }

  @Watch('$route')
  refresh() {
    this.$store.dispatch("getCurDirAsync", { id: this.$route.params.id });
    this.$store.dispatch("getFilesAsync", { parentId: this.$route.params.id });
  }

  breadcrumbIndex() {
    let index = [];
    if (this.$store.state.files.curDir.parent_index) {
      index = this.$store.state.files.curDir.parent_index.slice().reverse().splice(1,1);    
    }
    return index;
  }

  currentPage = 1;
  pagesize = 200;
  pageSizesList = [200];
  current_change(currentPage: any) {
    this.currentPage = currentPage;
  }

  formatDate(row: any, column: any, cellValue: any) {
    let date = new Date(row.created_at);
    let Y = date.getFullYear() + "-";
    let M =
      (date.getMonth() + 1 < 10
        ? "0" + (date.getMonth() + 1)
        : date.getMonth() + 1) + "-";
    let D = date.getDate() + " ";
    let h =
      (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
    let m =
      (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
      ":";
    let s = date.getSeconds();
    return Y + M + D + h + m + s;
  }

  dialogVisible = false;
  dialogImage = "";

  openFiles(data: any) {
    let arr = data.file_name.split(".");
    let str = arr[arr.length - 1].toLowerCase();
    if (str == "jpg" || str == "jpeg" || str == "bmp" || str == "png") {
      this.dialogVisible = true;
      this.dialogImage = "/api/Downloads/" + data.id;
    } else if (str == "pdf") {
      window.open("/static/pdf/web/viewer.html?file=/api/Downloads/" + data.id);
    } else {
      this.$message({
        type: "info",
        message: "不支持此文件预览，管理员可以下载"
      });
    }
  }

  onDelete(data: any) {
    let tips = "";
    if (!data.is_dir) {
      tips = "此操作将永久删除该文件, 是否继续?";
    } else {
      tips = "此操作将永久该目录以及目录内的全部文件, 是否继续?";
    }
    this.$confirm(tips, "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
      center: true
    })
      .then(() => {
        this.$store
          .dispatch("deleteFile", { id: data.id })
          .then(response => {
            this.$message({
              type: "success",
              message: "删除成功!"
            });
            this.$store.dispatch("getFilesAsync", {
              parentId: this.$route.params.id
            });
          })
          .catch(error => {
            this.$message({
              type: "error",
              message: "删除失败!"
            });
          });
      })
      .catch(() => {
        this.$message({
          type: "info",
          message: "已取消删除"
        });
      });
  }
}
</script>
